<template>
  <section class="hero">
    <div class="hero__background">
      <ParticleBackground
        :particle-count="40"
        particle-color="#409eff"
        :particle-size="2"
        :line-distance="120"
        :speed="0.3"
      />
    </div>
    
    <div class="container">
      <div class="hero__content">
        <!-- 头像 -->
        <div class="hero__avatar">
          <img :src="personalInfo.avatar" :alt="personalInfo.name" />
          <div class="hero__avatar-ring"></div>
        </div>
        
        <!-- 文字内容 -->
        <div class="hero__text">
          <h1 class="hero__title">
            你好，我是 
            <span class="text-gradient">{{ personalInfo.name }}</span>
          </h1>
          
          <div class="hero__subtitle">
            <span class="typing-text">{{ currentText }}</span>
            <span class="cursor">|</span>
          </div>
          
          <p class="hero__bio">
            {{ personalInfo.bio }}
          </p>
          
          <div class="hero__actions">
            <ElButton type="primary" size="large" @click="$router.push('/projects')">
              <ElIcon><Briefcase /></ElIcon>
              查看作品
            </ElButton>
            <ElButton size="large" @click="$router.push('/contact')">
              <ElIcon><Message /></ElIcon>
              联系我
            </ElButton>
          </div>
          
          <!-- 社交链接 -->
          <div class="hero__social">
            <a
              v-for="link in socialLinks"
              :key="link.name"
              :href="link.url"
              :title="link.name"
              class="hero__social-link"
              target="_blank"
              rel="noopener noreferrer"
            >
              <ElIcon :size="24">
                <component :is="getIconName(link.name)" />
              </ElIcon>
            </a>
          </div>
        </div>
      </div>
      
      <!-- 滚动提示 -->
      <div class="hero__scroll-hint">
        <ElIcon :size="32" class="bounce">
          <ArrowDown />
        </ElIcon>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Briefcase, Message, ArrowDown } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import ParticleBackground from '@/components/effects/ParticleBackground.vue'

const userStore = useUserStore()
const { info: personalInfo, social: socialLinks } = userStore

// 打字机效果
const texts = [
  personalInfo.title,
  'Web Developer',
  'UI/UX Enthusiast',
  'Problem Solver'
]
const currentText = ref('')
let textIndex = 0
let charIndex = 0
let isDeleting = false
let typingTimer = null

function typeText() {
  const currentFullText = texts[textIndex]
  
  if (isDeleting) {
    currentText.value = currentFullText.substring(0, charIndex - 1)
    charIndex--
  } else {
    currentText.value = currentFullText.substring(0, charIndex + 1)
    charIndex++
  }
  
  let typingSpeed = isDeleting ? 50 : 100
  
  if (!isDeleting && charIndex === currentFullText.length) {
    typingSpeed = 2000
    isDeleting = true
  } else if (isDeleting && charIndex === 0) {
    isDeleting = false
    textIndex = (textIndex + 1) % texts.length
    typingSpeed = 500
  }
  
  typingTimer = setTimeout(typeText, typingSpeed)
}

// 根据社交平台名称返回对应的图标组件名
function getIconName(name) {
  const iconMap = {
    'GitHub': 'Position',
    '微信': 'ChatDotRound',
    '邮箱': 'Message'
  }
  return iconMap[name] || 'Link'
}

onMounted(() => {
  typeText()
})

onUnmounted(() => {
  if (typingTimer) {
    clearTimeout(typingTimer)
  }
})
</script>

<style lang="scss" scoped>
.hero {
  position: relative;
  min-height: 100vh;
  @include flex-center;
  overflow: hidden;
  
  &__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
      rgba($primary-color, 0.1) 0%, 
      rgba($secondary-color, 0.1) 100%);
    z-index: -1;
  }
  
  &__particles {
    position: absolute;
    width: 100%;
    height: 100%;
    // 这里可以添加粒子效果背景
  }
  
  &__content {
    @include flex-column;
    align-items: center;
    text-align: center;
    padding: $spacing-2xl 0;
  }
  
  &__avatar {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: $spacing-2xl;
    
    img {
      width: 100%;
      height: 100%;
      border-radius: $radius-full;
      object-fit: cover;
      border: 4px solid var(--bg-primary);
      box-shadow: var(--shadow-xl);
    }
    
    &-ring {
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      border: 2px solid $primary-color;
      border-radius: $radius-full;
      animation: rotate 10s linear infinite;
      
      &::before,
      &::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background: $primary-color;
        border-radius: $radius-full;
      }
      
      &::before {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      
      &::after {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    
    @include respond-to('md') {
      width: 250px;
      height: 250px;
    }
  }
  
  &__text {
    max-width: 800px;
  }
  
  &__title {
    font-size: $font-size-3xl;
    margin-bottom: $spacing-lg;
    
    @include respond-to('md') {
      font-size: $font-size-5xl;
    }
  }
  
  &__subtitle {
    font-size: $font-size-xl;
    color: var(--text-secondary);
    margin-bottom: $spacing-lg;
    min-height: 40px;
    
    @include respond-to('md') {
      font-size: $font-size-2xl;
    }
    
    .cursor {
      animation: blink 1s infinite;
    }
  }
  
  &__bio {
    font-size: $font-size-lg;
    color: var(--text-secondary);
    margin-bottom: $spacing-2xl;
    line-height: 1.8;
  }
  
  &__actions {
    display: flex;
    gap: $spacing-md;
    margin-bottom: $spacing-xl;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  &__social {
    display: flex;
    gap: $spacing-md;
    justify-content: center;
  }
  
  &__social-link {
    @include flex-center;
    width: 44px;
    height: 44px;
    border-radius: $radius-full;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    @include transition(all);
    
    &:hover {
      background: $primary-color;
      color: white;
      transform: translateY(-4px);
    }
  }
  
  &__scroll-hint {
    position: absolute;
    bottom: $spacing-2xl;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-tertiary);
    cursor: pointer;
    
    .bounce {
      animation: bounce 2s infinite;
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
</style>

